<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="input1"
            placeholder="请输入搜索内容"
            clearable
            @clear="getGoods"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="seachGoods"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="goAddGoods">添加商品</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" height="650" border style="width: 100%">
        <el-table-column type="index" width="40"> </el-table-column>
        <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
        <el-table-column prop="goods_price" label="商品价格" width="100">
          <template slot-scope="scope">
            {{ "￥" + scope.row.goods_price }}
          </template>
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="90">
          <template slot-scope="scope">
            {{ scope.row.goods_price + 'g'}}
          </template>
        </el-table-column>
        <el-table-column prop="goods_number" label="商品数量" width="90">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间" width="160">
          <template slot-scope="scope">
            {{ scope.row.add_time | dataFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="small"
              @click="edit(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
              @click="del(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="pagesizes"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="添加商品">
      <el-form
        :model="addForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="addForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <el-input v-model="addForm.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="goods_number">
          <el-input
            v-model="addForm.goods_number"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
          <el-input
            v-model="addForm.goods_weight"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品介绍">
          <el-input
            v-model="addForm.goods_introduce"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="编辑信息"
      :visible.sync="editDialogVisible"
      width="50%"
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="addForm.goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <el-input
            type="number"
            v-model="addForm.goods_price"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="goods_number">
          <el-input
            type="number"
            v-model="addForm.goods_number"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
          <el-input
            type="number"
            v-model="addForm.goods_weight"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSub"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input1: "",
      query: "",
      pagenum: 1,
      pagesize: 30,
      tableData: [],
      total: 0,
      pagesizes: [30, 60, 90],
      addDialogFormVisible: false,
      addForm: {
        goods_name: "",
        goods_cat: ",",
        goods_price: 0,
        goods_number: 0,
        goods_weight: 0,
        goods_introduce: "",
        pics: "",
        attrs: [],
      },
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
      },
      editDialogVisible: false,
      goods_id:0
    };
  },
  created() {
    this.getGoods();
  },
  methods: {
    async getGoods() {
      const { data: res } = await this.$http.get("goods", {
        params: {
          query: this.query,
          pagenum: this.pagenum,
          pagesize: this.pagesize,
        },
      });
      console.log(res);
      if (res.meta.status != 200)
        return this.$message.error("获取商品列表失败");
      this.tableData = res.data.goods;
      this.total = res.data.total;
    },
    seachGoods() {
      this.query = this.input1;
      this.getGoods();
    },
    goAddGoods() {
      this.$router.push("/goods/add");
    },
    async del(scope) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await this.$http.delete(
            "goods/" + scope.goods_id
          );
          if (res.meta.status != 200)
            return this.$message.error("删除商品失败");
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getGoods();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.getGoods();
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getGoods();
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    edit(scope) {
      this.editDialogVisible = true;
      console.log(scope)
      this.addForm.goods_weight=scope.goods_weight;
      this.addForm.goods_price = scope.goods_price;
      this.addForm.goods_name = scope.goods_name;
      this.addForm.goods_number = scope.goods_number;
      this.goods_id = scope.goods_id;
    },
    editSub(){
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) {
          return this.$message.error("请填写必要的表单项！");
        }
        const { data: res } = await this.$http.put("goods/"+this.goods_id, this.addForm);
        console.log(this.addForm)
        console.log(res)
        if (res.meta.status != 200) {
          return this.$message.error("修改商品失败");
        }
        this.$message.success("修改商品成功");
        this.editDialogVisible = false;
        this.getGoods();
      })
    }
  },
  filters: {
    dataFormat(shijianchuo) {
      function add0(val) {
        return val < 10 ? "0" + val : val;
      }
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        add0(m) +
        "-" +
        add0(d) +
        " " +
        add0(h) +
        ":" +
        add0(mm) +
        ":" +
        add0(s)
      );
    },
  },
};
</script>
<style scoped>
</style>